<!-- Dom页面 -->
<template>
    <div id="UserIndex">
      <!-- 查询条件行 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="保鲜仓名称" v-model="queryWHForm.whName" clearable>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryWHForm.isUse" placeholder="申请状态">
            <el-option label="拒绝申请" :value="0"></el-option>
            <el-option label="审核通过" :value="1"></el-option>
            <el-option label="等待审核" :value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button  type="primary" plain icon="el-icon-search" @click="toQueryWH()">查询</el-button>
          <el-button  type="warning" plain icon="el-icon-refresh" @click="cleanQeury()">清空</el-button>
        </el-col>
      </el-row>
      <!-- 操作行 -->
      <el-row style="margin-top:10px;">
        <el-col :span="24">
          <el-button @click="addWH()" type="success" plain icon="el-icon-circle-plus-outline">申请保鲜仓</el-button>
        </el-col>
      </el-row>
      <!-- 表格行 -->
      <el-row style="margin-top:10px">
        <el-col :span="24">
          <el-table :data="applrecord" style="width: 100% " height="400px" border>
            <el-table-column prop="whName" label="保鲜仓名称" width="180"></el-table-column>
            <el-table-column prop="applTime" label="申请时间"></el-table-column>
            <el-table-column prop="orderState" label="申请状态" width="180">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.orderState == 0" type="warning">等待审核</el-tag>
                <el-tag v-else-if="scope.row.orderState == 1" type="success">审核已通过</el-tag>
                <el-tag v-else type="danger">申请被拒绝</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="220">
              <template slot-scope="scope">
                <el-button @click="toShowDetail(scope.row)" title="查看详情" plain icon="el-icon-search" size="mini"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页显示行 -->
      <el-row style="margin-top:10px">
        <el-col :span="24">
          <el-pagination
            :page-sizes="[10, 30, 60, 100]"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </el-col>
      </el-row>
  
      <!-- 新增或修改用户弹出框 -->
      <el-dialog
        title="申请保鲜仓"
        :visible.sync="this.dialog.addForm"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="30%">
        <el-form ref="addWHForm" label-width="80px">
          <el-form-item label="名称" prop="">
            <el-select v-model="addWHFormData.whName" placeholder="选择保鲜仓">
              <el-option v-for="(item,index) in warehouses" :key="index" :label="item.whName" :value="item.whId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="closeAddForm()">关闭</el-button>
            <el-button type="primary" @click="confirmAddWH()">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 查看详情弹出框 -->
    <el-dialog
      :visible.sync="dialog.showDetail"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="申请记录详情"
      width="50%">
        <el-descriptions title="详情如下" border >
          <template slot="extra">
            <el-button @click="closeShowDetail()" type="primary" size="small">关闭</el-button>
          </template>
        <el-descriptions-item label="申请记录编号">{{ showDetailData.recordId }}</el-descriptions-item>
        <el-descriptions-item label="申请人id">{{ showDetailData.userId }}</el-descriptions-item>
        <el-descriptions-item label="保鲜仓地址">{{ showDetailData.whAddress }}</el-descriptions-item>
        <el-descriptions-item label="申请状态">
          <el-tag v-if="showDetailData.orderState==0" type="warning">等待审核</el-tag>
          <el-tag v-else-if="showDetailData.orderState==1" type="success">申请已通过</el-tag>
          <el-tag v-else type="danger">申请被拒绝</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ showDetailData.applTime }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  
    </div>
  </template>
  
  <!-- :column="3" -->
  <!-- 组件js -->
  <script>
  export default {
    name: "ApplWarehouse",
    data() {
      return {
        //保鲜仓列表
        warehouses:[
          {whId:"101",whName:"弯塘村属仓",whAddress:"丘北县曰者镇弯塘村",userId:"wang",whArea:100.2,temperature:null,humidty:null,isUse:0,insertTime:null,updateTiem:null},
          {whId:"102",whName:"龙树村属仓",whAddress:"丘北县曰者镇龙树村",userId:null,whArea:100.2,temperature:null,humidty:null,isUse:0,insertTime:null,updateTiem:null},
          {whId:"103",whName:"新沟村属仓",whAddress:"丘北县曰者镇新沟村",userId:null,whArea:100.2,temperature:null,humidty:null,isUse:0,insertTime:null,updateTiem:null}
        ],
        //申请记录列表
        applrecord:[
          {recordId:"1",userId:"wang",whName:"弯塘村属仓",applTime:"2023-2-23",orderState:0,whAddress:"丘北县曰者镇弯塘村"},
          {recordId:"2",userId:"wang",whName:"龙树村属仓",applTime:"2023-2-23",orderState:1,whAddress:"丘北县曰者镇龙树村"},
          {recordId:"3",userId:"wang",whName:"新沟村属仓",applTime:"2023-2-23",orderState:2,whAddress:"丘北县曰者镇新沟村"}
        ],
        //查询保鲜仓记录表单
        queryWHForm:{
          whName:null,
          isUse:null
        },
        //弹窗状态
        dialog:{
          addForm:false,
          showDetail:false,
        },
        //申请保鲜仓表单
        addWHFormData:{
          whName:null,
        },
        //查看详情弹出数据
        showDetailData:{
          recordId:null,
          userId:null,
          whName:null,
          applTime:null,
          orderState:null,
          whAddress:null
        }
      };
    },
    methods:{
      //点击查询按钮
      toQueryWH(){
        
      },
      //点击清空按钮
      cleanQeury(){
        this.queryWHForm = {
          whName:null,
          isUse:null
        }
      },
      //点击申请保鲜仓
      addWH(){
        this.dialog.addForm = true
      },
      //申请表单关闭
      closeAddForm(){
        this.addWHForm = {
          whName : null
        }
        this.dialog.addForm = false
      },
      //确认申请表单
      confirmAddWH(){
        //提交申请表单

        //清空数据
        this.addWHForm = {
          whName : null
        }
        this.dialog.addForm = false
      },
      //查看详情按钮
      toShowDetail(item){
        this.showDetailData = item
        this.dialog.showDetail = true
      },
      //关闭查看详情弹窗
      closeShowDetail(){
        this.dialog.showDetail = false
        this.showDetailData = {
          recordId:null,
          userId:null,
          whName:null,
          applTime:null,
          orderState:null,
          whAddress:null
        }
      }
    },
    mounted(){

    }
  };
  </script>
  
  <!-- CSS代码 -->
  <style scoped></style>
  